<template>
  <div class="app-container gw-home">
    <div class="home-part left-home-part">
      <div class="app-container-tree" v-loading="loading">
        <el-tabs v-model="tabs_name" @tab-click="handleTabs">
          <el-tab-pane label="设备" name="first">
            <el-scrollbar class="submitForm">
              <device-tree
                class="addr-tree"
                ref="qnDeviceTree"
                :grid_len="grid_len"
                :grid_select="grid_select"
                @node-click="clickTree"
                @check="getDeviceList"
              >
              </device-tree>
            </el-scrollbar>
            <div class="check-template-footer">
              <el-button class="fill-btn" @click="tabs_name = 'second'">下一步</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模板" name="second">

            <div class="check-template">
              <el-scrollbar class="submitForm">
                <div class="check-template-item"
                     v-for="item in list_template"
                     :key="item.id"
                >
                  <el-radio
                    class="item-radio"
                    v-model="cut_template"
                    :label="item.id"
                    @change="setTemplate(item.items)"
                  >{{ item.name }}
                  </el-radio>
                  <span class="action item-btn" @click="seesee3(item.items, item.name)">查看</span>|
                  <span class="action item-btn" @click="delTemplate(item)">删除</span>
                </div>
              </el-scrollbar>
              <div class="check-template-footer">
                <el-button class="fill-btn" @click="tabs_name = 'third'">开始巡店</el-button>
                <el-button class="plain-btn" @click="customizeModel()">自定义模板</el-button>
              </div>
            </div>

          </el-tab-pane>

          <!-- 查看模板的弹出框 -->
          <el-dialog
            title="查看模板内容"
            class="update-template"
            :visible.sync="dialog_check"
            :close-on-click-modal="false"
            center
            width="30%"
          >
            <div class="templateName">{{ templateName }}</div>
            <div class="template-detail-tree">
              <el-tree
                :data="seeseeList"
                :props="defaultProps"
                default-expand-all
                :expand-on-click-node="false"
                icon-class="el-icon-s-order"
              ></el-tree>
            </div>
          </el-dialog>

          <!-- 自定义模板的弹出框 -->
          <el-dialog title="自定义考核模板" class="update-template" :visible.sync="customTemplateDialog" width="30%"
                     :close-on-click-modal="false" center
          >
            <el-form ref="customTemplateForm" :model="customTemplateInfo" label-width="95px" label-position="right"
                     :rules="createTemplateRules"
            >
              <el-row class="template-item" :gutter="20" type="flex" align="middle">
                <el-col :span="16">
                  <el-form-item prop="name">
                    <span slot="label" class="form-item-label">模板名称</span>
                    <el-input v-model="customTemplateInfo.name" placeholder="模板名称"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="设为公用：">
                    <el-switch v-model="customTemplateInfo.isPublic" active-text="是" inactive-text="否"
                               :active-value="1" :inactive-value="0"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 分割线 -->
              <el-row class="qn-line" :gutter="20"></el-row>
              <el-row class="template-item" :gutter="20">
                <el-col :span="4">
                  <div>关联考评项：</div>
                  <div class="the-score">选中项总分值 {{ countScore }}</div>
                </el-col>
                <el-col :span="20">
                  <el-tree :data="evaluationList" show-checkbox node-key="id"
                           :default-checked-keys=[] :props="defaultPorps2" ref="my_tree"
                           @check="SelectedStatusfun"
                  >
                  </el-tree>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="plain-dialog-btn" @click="cancel">取消</el-button>
              <el-button class="fill-dialog-btn" @click="createEvaluationTemplate()">确认</el-button>
            </div>
          </el-dialog>

          <!-- 分割线 -->
          <el-tab-pane label="巡店" name="third">
            <el-form v-if="currentCheckTemplate.length !== 0" :label-position="'top'" ref="censorRef">
              <el-scrollbar class="submitForm">
                <el-form-item v-for="(item, index) in currentCheckTemplate" :key="item.id">
                  <div slot="label">
                    <div class="check-title"><span>{{ item.name }}</span><span v-if="!checkItemsForm[index].qualify"
                                                                               class="sub-score"
                    >-{{ item.score }}</span></div>
                  </div>
                  <el-radio-group v-model="checkItemsForm[index].qualify">
                    <el-radio :label="1">合格</el-radio>
                    <el-radio :label="0">不合格</el-radio>
                  </el-radio-group>
                  <div class="fail-cotent" v-if="!checkItemsForm[index].qualify">
                    <div class="fail-tip">*请先用鼠标点击存在异常事件的窗口，然后点击拍照取证即可</div>
                    <div class="camera-isall">
                      <span class="action item-btn" @click="checkAll">全选</span>
                      <span class="action item-btn" @click="cancelAll">取消</span>
                    </div>
                    <div class="camera-button" @click="getPhoto(index)">
                      <i class="el-icon-camera-solid"/>
                      <span class="pzqz">拍照取证</span>
                    </div>
                    <el-upload
                      action=""
                      :on-remove="(file, fileList)=> removePhoto(file, fileList, index)"
                      :file-list="checkItemsForm[index].pictures"
                      list-type="picture-card"
                    >
                    </el-upload>
                  </div>
                </el-form-item>
              </el-scrollbar>
              <div class="check-template-footer">
                <el-button class="fill-btn" @click="submitCheckResutl">提交</el-button>
              </div>
            </el-form>
            <el-empty v-else description="未选择模板"></el-empty>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="home-part right-home-part">
      <!-- <tagsNav :routeList="routeList"></tagsNav> -->
      <div class="panel-container home-right">
        <div class="panel-title2">
          <span>监控视频</span>
          <div class="operator">
            <div class="workorder-btn">
            </div>
            <el-tooltip effect="dark" content="网页全屏" placement="top">
              <i class="iconfont iconquanping" @click="webFS()"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="单个视频" placement="top">
              <i class="iconfont icon-quanping5" :class="{active: grid_len === 1}" @click="changeTab(1)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="四格视频" placement="top">
              <i class="iconfont icon-ic_mode_block" :class="{active: grid_len === 4}" @click="changeTab(4)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="九宫格视频" placement="top">
              <i class="iconfont icon-nine-squares" :class="{active: grid_len === 9}" @click="changeTab(9)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="十二格视频" placement="top">
              <i class="iconfont icon-jiugongge-line-" @click="changeTab(12,1,1)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="十六格视频" placement="top">
              <i class="iconfont icon-wanggeshitu" :class="{active: grid_len === 16}" @click="changeTab(16)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="二十四格视频" placement="top">
              <i class="iconfont icon-louceng" :class="{active: grid_len === 24}" @click="changeTab(24)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="二十五格视频" placement="top">
              <i class="iconfont icon-louceng" :class="{active: grid_len === 25}" @click="changeTab(25)"></i>
            </el-tooltip>
            <el-tooltip effect="dark" content="监控区全屏" placement="top">
              <i class="iconfont icon-ico_quanping" ref="fullBtn" @click="changeFullScreen"></i>
            </el-tooltip>
          </div>
        </div>
        <!-- 播放器区域 -->
        <div class="panel-content">
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_3">
            <div v-for="i in grid_len" :key="i" class="video-item">
              <!-- 播放器 -->
              <player-box :stream_type="stream_type" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                          @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)" @change-check="getChecked"
              >
              </player-box>

            </div>
          </div>
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_2">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <player-box :stream_type="stream_type" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                          @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)"
              >
              </player-box>
            </div>
          </div>
          <div class="video-content" ref="videoArea" :class="'video-item-' + grid_len" v-if="tabActive12_2_old">
            <div v-for="i in grid_len" :key="i" class="video-item12_2">
              <!-- 播放器 -->
              <player-box :stream_type="stream_type" :player_index="i-1" :is_active="(grid_select == i-1) && has_active"
                          @handleitem="handleGrid(arguments)" :ref="'videoPlayer' + (i - 1)"
              >
              </player-box>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    巡检记录弹窗-->
    <el-dialog
      :visible.sync="inspectionDialogVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <div slot="title">
        <div class="cube"/>
        <span>巡店结果</span>
      </div>
      <div class="w100">
        <div v-if="inspectionList.length > 0" class="inspection-dialog-top">
          <div>巡店人员：{{ inspectionList[0].patrolUserName }}</div>
          <div>提交时间：{{ inspectionList[0].submitTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</div>
          <div>巡店方式：视频巡店</div>
          <div>巡店状态：已巡检</div>
        </div>
        <el-table
          :data="inspectionList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          ref="multipleOrderTable"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="siteName"
            label="门店名称"
          >
          </el-table-column>
          <el-table-column
            prop="totalIssue"
            label="点检项数量"
          >
          </el-table-column>
          <el-table-column
            prop="totalScore"
            label="总分"
          >
          </el-table-column>
          <el-table-column
            prop="qualify1Issue"
            label="合格数"
          >
          </el-table-column>
          <el-table-column
            prop="qualify0Issue"
            label="不合格数"
          >
          </el-table-column>
          <el-table-column
            label="得分率"
          >
            <template slot-scope="{ row }">
              <span>{{ (row.ratioScore * 100).toFixed(0) }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="qualify"
            label="考评结果"
          >
            <template slot-scope="{ row }">
              <span>{{ row.qualify ? '合格' : '不合格' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="{ row }">
              <el-button @click="showInspectionDetail(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showOrderForm">提交工单</el-button>
        <el-button @click="reCruVideo">返回</el-button>
      </span>
      <el-dialog
        width="80%"
        :visible.sync="inspectionDetailDialogVisible"
        append-to-body
      >
        <!--        巡查详情-->
        <div class="detail w100">
          <!-- 三个卡片的大盒子 -->
          <div class="crurecordBox">
            <!-- 基本信息 -->
            <el-card class="box-card1">
              <div slot="header" class="clearfix">
                <div class="cube"/>
                <span>基本信息</span>
              </div>
              <div class="contentBox">
                <div>
                  <!-- 基本信息 1 -->
                  <div class="text item">
                    <div>网点：{{ inspectionInfo.siteName }}</div>
                    <div class="box-content">
                      巡店人：{{ inspectionInfo.patrolUserName }}
                    </div>
                    <div class="box-content">
                      巡店时间：{{ inspectionInfo.submitTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
                      <span></span>
                    </div>
                  </div>
                </div>
                <!-- 基本信息 2 -->
                <div>
                  <div class="text item">
                    <div>
                      巡店方式：视频巡店
                    </div>
                    <div class="box-content">
                      事件状态：未提交
                    </div>
                    <div class="box-content">
                      是否合格：{{ inspectionInfo.qualify ? '合格' : '不合格' }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
            <!-- 巡店得分 -->
            <el-card class="box-card2">
              <div slot="header" class="clearfix">
                <div class="cube"/>
                <span>巡店得分</span>
              </div>
              <div class="contentBox">
                <div>
                  <div class="text item">
                    <div>
                      <el-progress
                        style="white-space: pre;"
                        type="circle"
                        :percentage="recordScore.ratioScore * 100"
                        :width="110"
                        :stroke-width="10"
                        :format="scoreFormat"
                      />
                    </div>
                  </div>
                </div>
                <div class="itemBox">
                  <div class="text item">
                    <div>
                      <!-- 圆点 -->
                      <div class="point count1"/>
                      总分：{{ recordScore.totalScore }}
                    </div>
                    <div class="box-content">
                      <!-- 圆点 -->
                      <div class="point count2"/>
                      有效总分：{{ recordScore.validScore }}
                    </div>
                    <div class="box-content">
                      <!-- 圆点 -->
                      <div class="point count3"/>
                      本次得分: {{ recordScore.gotScore }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
            <!-- 结果统计 -->
            <el-card class="box-card3">
              <div slot="header" class="statistics">
                <div class="result">
                  <div class="cube"/>
                  <span>结果统计</span>
                </div>
                <!-- 判断是否合格 而展示不同的样式 目前没有是否合格的数据 -->
                <div class="passpie3" v-if="inspectionInfo.qualify === 0 ">不合格</div>
                <div class="passpie2" v-else>合格</div>
              </div>
              <!-- 点检总数图表 -->
              <div class="contentBox">
                <div>
                  <div class="text item">
                    <div class="data-picture">
                      <el-progress
                        style="white-space: pre;"
                        type="circle"
                        :percentage="inspectionInfo.ratioScore * 100"
                        :width="110"
                        :stroke-width="10"
                        :format="totalSiteFormat(inspectionInfo.totalIssue)"
                      />
                    </div>
                  </div>
                </div>
                <div class="itemBox">
                  <div class="text item">
                    <div>
                      <div class="point count4"/>
                      <!-- 圆点 -->
                      合格：{{ inspectionInfo.qualify1Issue }}
                    </div>
                    <div class="box-content">
                      <div class="point count5"/>
                      <!-- 圆点 -->
                      不合格: {{ inspectionInfo.qualify0Issue }}
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <!-- 详细页面第二个大盒子 -->
          <div class="centerBox">
            <!-- 标签页面 -->
            <div class="threebtn">
              <el-button class="plain-btn" @click="queryIssue(inspectionInfo.prId,-1)">全部</el-button>
              <el-button class="plain-btn" @click="queryIssue(inspectionInfo.prId,1)">合格</el-button>
              <el-button class="plain-btn" @click="queryIssue(inspectionInfo.prId,0)">不合格</el-button>
            </div>
            <!-- 页面 -->
            <div>
              <!-- 全部页面 -->
              <div>
                <div>
                  <el-table :data="this.recordIssue" border style="width: 100%"
                            v-loading="listLoading"
                            element-loading-text="数据加载中"
                            element-loading-spinner="el-icon-loading"
                            height="400px"
                  >
                    <!-- 图片 -->
                    <el-table-column class="pics" label="取证图片" width="460">
                      <!-- 照片进行横向循环展示图片 -->
                      <template slot-scope="scope">
                        <div class="demo-image__preview">
                          <el-image
                            v-for="(item, index) in scope.row.pictures"
                            :key="index"
                            style="
                          width: 125px;
                          height: 75px;
                          margin: 0 10px 0 10px;
                        "
                            :src="'http://'+item.pictureUrl"
                          />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="结果">
                      <template slot-scope="{ row }">
                        {{ row.qualify == 0 ? '不合格' : '合格' }} | 得分:{{ row.gotScore }}
                      </template>
                    </el-table-column>
                    <el-table-column label="考评项">
                      <template slot-scope="{ row }">{{ row.checkName }}</template>
                    </el-table-column>
                    <el-table-column prop="" label="备注"/>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--        巡查详情-->
      </el-dialog>
      <el-dialog
        title="提交工单"
        width="80%"
        :visible.sync="submitOrderDialogVisible"
        append-to-body
      >
        <div v-for="(item, i) in orderForm" :key="i">
          <div id="geth" class="batch">
            <!-- 图片 -->
            <div style="width: 48%;">
              <!--            'http://'+item.pictureUrl item.base64Img-->
              <img :id="'img'+i" :src="item.base64Img? item.base64Img: item.pictureUrl"
                   style="width: 100%;"
              />
              <el-button size="mini" type="primary" class="fill-btn" @click="editMultiGraph(i)">编辑图片</el-button>
            </div>
            <!-- 表单 -->
            <div style="width: 48%">
              <el-form :model="item" label-position="right" label-width="85px">
                <el-form-item label="所属网点:">
                  {{ item.siteName }}
                </el-form-item>
                <el-form-item label="评检项:">
                  {{ item.checkName }}
                </el-form-item>
                <el-form-item label="优先级:">
                  <el-select v-model="item.priority" filterable reserve-keyword placeholder="优先级" style="width: 100%"
                             clearable
                  >
                    <el-option v-for="item in list_priority" :key="item.id" :label="item.label" :value="item.id"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="处理时限:">
                  <el-date-picker :default-value="new Date()" :picker-options="pickerOptions0"
                                  v-model="item.dealWithTime" style="width: 100%" value-format="yyyy-MM-dd HH:mm:ss"
                                  type="datetime"
                  />
                </el-form-item>
                <el-form-item label="指派给:">
                  <el-select v-model="item.dealWithUserId" filterable reserve-keyword placeholder="指派给"
                             style="width: 100%" clearable
                  >
                    <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="抄送至:">
                  <el-select v-model="item.copyUserId" filterable reserve-keyword placeholder="抄送至" style="width: 100%"
                             clearable
                  >
                    <el-option v-for="item in list_user" :key="item.id" :label="item.realName" :value="item.userId"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注:">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入备注"
                            ref="wk_form_remark" key="remark" v-model="item.remark" name="remark"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 分隔线 -->
          <div class="separationLine"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitOrderDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitOrder">确 定</el-button>
        </span>
        <!-- 编辑用的画布 -->
        <el-dialog @open="innerVisibleshow" width="65%" title="编辑图片" :visible.sync="innerVisible" append-to-body>
          <div id="getw" class="draw-page">
            <canvas id="myCanvas"></canvas>
          </div>
          <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="confirmEdit">确 定</el-button>
  </span>
        </el-dialog>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTemplate,
  listCheck,
  addTemplate,
  delTemplate,
  submitInspection,
  listInspection2,
  getRecordBase,
  getRecordScore,
  getRecordResult,
  getRecordIssue,
  submitPatrolWorkOrder2,
  queryWorkOrderIssueList
} from '@/api/cruising'

import { getVideourl } from '@/api/video.js'
import { listEvaluate } from '@/api/workorder.js'
import { listUser } from '@/api/permission.js'

// import tagsNav from '@/components/Header/tagsNav'
import 'jquery.nicescroll'
import DeviceTree from '@/components/Address/DeviceTree'

import PlayerBox from '@/components/DeviceVideoPlayer/PlayerBox'
import { log } from 'video.js'
import _ from 'lodash'
import { parseTime, getBase64 } from '@/utils'
import { mapGetters } from 'vuex'
import Atrament from 'atrament'

// 退出全屏
var exitWebFS = (that) => {
  return function(e) {
    if (e.key === 'Escape' && !e.repeat) {
      if (document.body.classList.contains('web-fullscreen-fix')) {
        document.body.classList.remove('web-fullscreen-fix')
        if (that.videoStream === 'WS') return
        that.getHW()
      }
    }
  }
}

export default {
  components: {
    PlayerBox,
    DeviceTree
    // tagsNav
  },
  filters: {
    parseTime
  },
  data() {
    return {
      // 规则校验==========================
      createTemplateRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      // 模板=================================
      templateName: '',
      seeseeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialog_check: false,

      // 自定义模板============================
      GeneralTitleTow: '自定义模板',
      countScore: 0,
      customTemplateDialog: false,
      evaluationList: [],
      // 只定义模板数据
      customTemplateInfo: {
        name: '',
        checkItems: '',
        isPublic: 0
      },
      defaultPorps2: {//树结构
        // tree 配置项
        children: 'items',
        label: 'name'
      },
      SelectedStatus: '',

      tabs_name: 'first',
      // tabs标签页
      list_template: [],
      // 考评模板列表
      cut_template: '',
      // 当前绑定的模板
      currentCheckTemplate: [], // 选中的巡检模板数据
      // 开始巡查表单
      checkItemsForm: [],
      // 选择框数组
      checkBoxArr: [{ checked: false }],
      // 加载中
      loading: false,
      // 返回的巡查记录id数组
      inspectionIds: [],
      // 巡检记录列表
      inspectionList: [],
      // 巡检记录弹窗
      inspectionDialogVisible: false,
      // 巡检记录详情弹窗
      inspectionDetailDialogVisible: false,
      // 巡查记录列表
      inspectionInfo: {},
      // (详情)查询巡检记录基本信息
      recordBase: {},
      // (详情)查询巡检记录分数信息
      recordScore: {},
      // (详情)查询巡检记录结果统计
      recordResult: {},
      // (详情)查询巡检问题列表
      recordIssue: {},
      // 表格内容加载
      listLoading: false,
      // 工单数组
      orderForm: [],
      // 提交工单弹窗
      submitOrderDialogVisible: false,
      // 优先级
      list_priority: [{ id: 1, label: '高(1天)' }, { id: 2, label: '中(2天)' }, { id: 3, label: '低(7天)' }],
      // 时限限制
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      multipleSelection: [],

      videoPlayTimer: null,
      has_active: false,
      grid_select: -1,
      grid_len: 1,

      cameraIds: [],
      // 保存当前活跃宫格中 播放器的播放参数-----------------------
      rtmpSrc: '', // 操作云台的地址
      rtmpType: '', // 设备类型  目前只球机可以控云台
      // deviceIndex: -1, // 播放的设备是第几个
      deviceId: '',
      gatewayId: '',
      channelNum: '',
      // ----------------------------------------
      playerWidth: '',
      playerHeight: '',
      videoStreamId: '',
      routeList: [],
      coverPlatform: false,
      filterText: '',
      tabActive12_2: false,
      tabActive12_3: true,
      tabActive12_2_old: false,
      ipcArrs: {},
      stream_type: 'HLS',
      imgCreateTimeS: [],
      innerVisible: false,
      // 传来的数组下标
      cache: '',
      afterEditing: ''
    }
  },
  created() {
    this.getEvaluationList()
    // 下拉回显--------------------------
    listEvaluate().then(res => {
      this.list_workorder = res.data
      this.$store.dispatch('workorder/getWorkorderType', res.data)
    })
    listUser().then(res => {
      // this.list_user = res.data
      this.$store.dispatch('workorder/getListUser', res.data)
    })
  },
  computed: {
    // 站点id数组
    siteIds() {
      return [...new Set(this.checkBoxArr.filter(item => item.checked).map(item => item.siteId))]
    },
    // 最终提交数据
    finalSubmitData() {
      const finalData = []
      for (let i = 0; i < this.siteIds.length; i++) {
        // 深度克隆
        const checkItems = _.cloneDeep(this.checkItemsForm)
        checkItems.forEach(item => {
          item.pictures = item.pictures.filter(item => item.siteId === this.siteIds[i]).map(item => {
            return {
              channelId: item.channelId,
              deviceId: item.deviceId,
              base64Picture: item.url,
              imgCreateTime: item.imgCreateTime
            }
          })
        })
        finalData.push(
          {
            siteId: this.siteIds[i],
            checkItems
          }
        )
      }
      console.log('最初数据 :>> ', finalData)
      return finalData
    },
    player() {
      return this.$refs.videoPlayer.player
    },
    grid_len_width() {
      if (this.grid_len === 1) {
        return 'w99'
      } else if (this.grid_len === 4) {
        return 'w49'
      } else if (this.grid_len === 9) {
        return 'w32'
      } else if (this.grid_len === 12) {
        return 'w24'
      } else if (this.grid_len === 16) {
        return 'w24'
      } else if (this.grid_len === 24) {
        return 'w16'
      } else if (this.grid_len === 25) {
        return 'w19'
      } else {
        return ''
      }
    },
    ...mapGetters(['list_user'])
  },
  mounted() {
    const menuList = JSON.parse(localStorage.getItem('menuList'))
    if (menuList && menuList.length) {
      menuList.map((item) => {
        if (item.id === '805') {
          this.routeList = JSON.parse(JSON.stringify(item.children))
        }
      })
      for (const item of this.routeList) {
        item.path = '/' + item.pathName
      }
    }
    window.onresize = () => {
      if (this.stream_type == 'xFLV' || this.stream_type == 'xHLS' || this.stream_type == 'HLS') return
      this.getHW()
    }
    // this.getVideoStreamType() // 获取码流类型
    document.addEventListener('keydown', exitWebFS(this))

    // 下拉回显--------------------------

    this.getTemplate()
  },
  beforeDestroy() {
    window.onresize = null
    document.removeEventListener('keydown', exitWebFS(this))

    window.clearInterval(this.videoPlayTimer)
  },
  watch: {
    playerWidth() {
      this.rotate()
    },
    playerHeight() {
      if (this.tabActive12_2 === true) {
        this.rotate2()
      } else if (this.tabActive12_2_old === true) {
        this.rotate()
      } else {
        this.rotate()
      }
    }
  },
  methods: {
    // 查看模板=====================
    seesee3(arr, name) {
      this.templateName = name
      // console.log(name,'name')
      // 拿到所有的考题（父级）
      let parent = []
      let parentId = []
      // console.log(arr)
      arr.forEach((val, i) => {
        if (parentId.indexOf(val.checkGroupId) == -1) {
          parentId.push(val.checkGroupId)
          parent.push({ id: val.checkGroupId, name: val.checkGroupName, children: [] })
        }
      })
      // 把所有的子级 放入parent里边
      arr.forEach((val, i) => {
        parent.forEach((val2, i2) => {
          if (val2.id == val.checkGroupId) {
            val2.children.push(val)
          }
        })
      })
      console.log(parent)
      this.seeseeList = parent
      // console.log(parent)
      // console.log(name, 'name')
      this.dialog_check = true
    },

    // 自定义模板======================
    // 点击自定义模板
    customizeModel() {
      this.customTemplateDialog = true
      this.$nextTick(() => {
        this.resetTemp2()
      })
      // this.customTemplateDialog = true
      this.$nextTick(() => {
        this.$refs['customTemplateForm'].clearValidate()
      })
    },
    //添加考评组
    createEvaluationTemplate() {
      const evaluationList = this.$refs.my_tree.getCheckedNodes(true, false)
      this.customTemplateInfo.checkItems = evaluationList.map(item => item.id).join(',')
      this.$refs.customTemplateForm.validate(async valid => {
        if (!valid) return this.$message.error('请完善名称')
        if (evaluationList.length === 0) return this.$message.error('请选择考评项目')
        const res = await addTemplate(this.customTemplateInfo)
        if (res.code !== 0) return this.$message.error(res.msg)
        this.customTemplateDialog = false
        this.getTemplate()
        return this.$message.success(res.msg)
      })
    },
    // 删除考评模板
    async delTemplate(item) {
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(res => res)
      if (res !== 'confirm') return
      await delTemplate([item.id])
      this.getTemplate()
    },
    // 获取考评组列表
    getEvaluationList() {
      this.listLoading = true
      // {pageNo:this.listQuery.page, pageSize: this.listQuery.limit, name:this.listQuery.keyword}
      listCheck().then((res) => {
        if (res.code == 0) {
          this.evaluationList = res.data
          // console.log(this.evaluationList, '获取考评组列表')
          if (this.evaluationList && this.evaluationList.length > 0) {
            this.evaluationList.forEach((val, i) => {
              val.items.map((item, i) => {
                item.remove = 0
              })
            })
          }
          this.total = parseInt(res.total)

          this.listLoading = false
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: '网络错误',
          type: 'error'
        })
      })
    },
    // 计算分数
    SelectedStatusfun(data, Select) {
      this.countScore = this.$refs.my_tree.getCheckedNodes(true, false).reduce((total, item) => total + parseInt(item.score), 0)
    },
    //取消
    cancel() {
      this.customTemplateDialog = false
      this.resetTemp2()
    },
    // 清空temp
    resetTemp2() {
      this.customTemplateInfo = {
        name: '', // 考评组的名字
        isPublic: 0,
        checkItems: ''
      }
      this.$refs['my_tree'].setCheckedKeys([])
    },
    // 切换tabs页
    handleTabs(tab, event) {
      // console.log(tab)
      // console.log(event)
    },
    // 获取考评组列表
    getTemplate() {
      // {pageNo:this.listQuery.page, pageSize: this.listQuery.limit, name:this.listQuery.keyword}
      listTemplate().then((res) => {
        // console.log(res.data)
        if (res.code === 0) {
          this.list_template = res.data
        }
      })
    },
    // 选择模板时自动同步到巡店tab页
    setTemplate(data) {
      this.currentCheckTemplate = data
      this.checkItemsForm = []
      for (let i = 0; i < data.length; i++) {
        this.checkItemsForm.push({
          checkId: data[i].id,
          qualify: 1,
          pictures: []
        })
      }
    },
    // 时间格式化
    GetDateTimeToString(date_) {
      var year = date_.getFullYear()
      var month = date_.getMonth() + 1
      var day = date_.getDate()
      if (month < 10) month = '0' + month
      if (day < 10) day = '0' + day

      var hours = date_.getHours()
      var mins = date_.getMinutes()
      var secs = date_.getSeconds()
      var msecs = date_.getMilliseconds()
      if (hours < 10) hours = '0' + hours
      if (mins < 10) mins = '0' + mins
      if (secs < 10) secs = '0' + secs
      if (msecs < 10) secs = '0' + msecs
      return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + secs
    },
    // 获取巡检照片 promise对象
    getPhoto(index) {
      // console.log('选择box',this.checkBoxArr)
      this.checkItemsForm[index].pictures = []
      // this.checkItemsForm[index].uploadImgArr = []
      // 判断是否为空并赋值
      var cw = 1024
      var ch = 768
      // var blank = document.createElement('canvas')
      // blank.width = cw
      // blank.height = ch
      for (let i = 0; i < this.grid_len; i++) {
        if (this.checkBoxArr[i].checked && this.checkBoxArr[i].hasOwnProperty('device_id')) {
          // console.log("视频标签：",this.$refs['videoPlayer' + i][0].$el.children[0].children[1].children[1].children[0]);
          var video = this.$refs['videoPlayer' + i][0].$el.children[0].children[1].children[1].children[0]
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          canvas.width = cw
          canvas.height = ch
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
          const url = canvas.toDataURL('image/png')
          if (video.videoWidth != 0) {

            this.checkItemsForm[index].pictures.push({
              deviceId: this.checkBoxArr[i].device_id,
              channelId: this.checkBoxArr[i].channel_id,
              siteId: this.checkBoxArr[i].siteId,
              url: url,
              imgCreateTime: this.GetDateTimeToString(new Date())
            })

          }
        }
      }
    },
    // 更新删除图片 回调再回调
    removePhoto(file, fileList, index) {
      // console.log('删除参数1 :>> ', file);
      // console.log('删除参数2 :>> ', fileList);
      // console.log('删除参数3 :>> ', index);
      // 筛选数组
      this.checkItemsForm[index].pictures = fileList
    },
    // 获取设备选取值
    getChecked(index, device_id, channel_id, siteId, checked) {
      // console.log('选择框索引',index)
      // console.log('设备id', device_id)
      // console.log('通道id', channel_id)
      // console.log('站点id', siteId)
      // console.log('选择框状态',checked)
      this.checkBoxArr[index] = {
        device_id,
        channel_id,
        siteId,
        checked
      }
      // console.log(this.checkBoxArr)
    },
    // 全选
    checkAll() {
      for (let i = 0; i < this.checkBoxArr.length; i++) {
        // console.log(this.checkBoxArr[i].hasOwnProperty('device_id'))
        if (this.checkBoxArr[i].hasOwnProperty('device_id')) {
          this.$refs['videoPlayer' + i][0].$children[0].checked = true
        }
      }
    },
    // 取消
    cancelAll() {
      for (let i = 0; i < this.checkBoxArr.length; i++) {
        // console.log(this.checkBoxArr[i].hasOwnProperty('device_id'))
        if (this.checkBoxArr[i].hasOwnProperty('device_id')) {
          this.$refs['videoPlayer' + i][0].$children[0].checked = false
        }
      }
    },
    // 提交巡检记录
    async submitCheckResutl() {
      // console.log('提交表格数据',this.checkItemsForm)
      // console.log('站点数据',this.siteIds)
      // console.log('最终拼装数据', this.finalSubmitData)
      if (this.finalSubmitData.length === 0) return
      this.loading = true
      const res = await submitInspection(this.finalSubmitData)
      this.loading = false
      if (res.code !== 0) return this.$message.error(res.msg)
      this.inspectionIds = res.data
      await this.getInspectionList()
    },
    // 获取当前巡检记录
    async getInspectionList() {
      this.inspectionDialogVisible = true
      const res = await listInspection2(this.inspectionIds)
      if (res.code !== 0) return this.$message.error(res.msg)
      this.inspectionList = res.data.list
      this.$refs.multipleOrderTable.toggleAllSelection()
      // console.log(this.$refs.multipleOrderTable)
    },
    // 展示巡检项详情
    async showInspectionDetail(row) {
      this.listLoading = true
      this.inspectionInfo = row
      const { data: base } = await getRecordBase({ prId: row.prId })
      this.recordBase = base
      const { data: score } = await getRecordScore({ prId: row.prId })
      this.recordScore = score
      const { data: result } = await getRecordResult({ prId: row.prId })
      this.recordResult = result
      const { data: issue } = await getRecordIssue({ prId: row.prId, qualify: -1 })
      this.recordIssue = issue
      // console.log(this.recordIssue)
      this.inspectionDetailDialogVisible = true
      this.listLoading = false
    },
    scoreFormat(percentage) {
      return `${percentage.toFixed(0)}%` + '\n' + '得分率'
    },
    totalSiteFormat(total) {
      return () => {
        return total + '\n' + '检点总数'
      }
    },
    // 巡检详情，底部切换合格与不合格
    async queryIssue(prid, state) {
      this.listLoading = true
      const { data: issue } = await getRecordIssue({ prId: prid, qualify: state })
      this.recordIssue = issue
      this.listLoading = false
    },
    //展示提交工单页
    async showOrderForm() {
      if (this.inspectionIds.length === 0) return this.$message.error('请选择站点')
      this.submitOrderDialogVisible = true
      this.orderForm = []
      const { data: issue } = await queryWorkOrderIssueList(this.inspectionIds)
      this.orderForm = issue
      // for (let i = 0; i<this.inspectionIds.length; i++) {
      //   const { data:issue } = await getRecordIssue({ prId:this.inspectionIds[i], qualify:0 })
      //   const tepArr = issue
      //   console.log(tepArr)
      //   tepArr.forEach(item => {
      //     item.pictures.forEach(item1 => {
      //       this.orderForm.push(item1)
      //     })
      //   })
      // }
      // console.log(this.orderForm)
    },
    handleSelectionChange(val) {
      this.inspectionIds = val.map(item => item.prId)
    },
    // 返回视频巡查
    reCruVideo() {
      this.tabs_name = 'second'
      this.currentCheckTemplate = []
      this.inspectionDialogVisible = false
      this.cut_template = ''
    },
    async submitOrder() {
      if (this.orderForm.some(item => {
        return item.hasOwnProperty('priority') && item.hasOwnProperty('dealWithTime') && item.hasOwnProperty('copyUserId')
      })) {

        // console.log('封装前巡察参数 :>> ', this.orderForm)

        // if (this.imgCreateTimeS.length != 0) {
        //   this.orderForm.forEach((element, i) => {
        //     this.$set(element, "imgCreateTime", this.imgCreateTimeS[i])
        //   })
        // }

        console.log('封装后巡察参数 :>> ', this.orderForm)

        const orderData = this.orderForm.map(item => {
          return {
            pdId: item.pdId,
            prId: item.prId,
            piId: item.piId,
            dealWithTime: item.dealWithTime,
            dealWithUserId: item.dealWithUserId,
            priority: item.priority,
            copyUserId: item.copyUserId,
            base64Img: item.base64Img || null,
            remark: item.remark
          }
        })
        // console.log('提交结果', orderData)
        const res = await submitPatrolWorkOrder2(orderData)
        console.log('工单id', this.inspectionIds)
        if (res.code !== 0) return this.$message.error(res.msg)
        this.inspectionList = this.inspectionList.filter(item => {
          // console.log(this.inspectionIds.indexOf(item.prId))
          return this.inspectionIds.indexOf(item.prId) === -1
        })

        // this.inspectionList = []
        debugger
        this.$message.success('提交成功')
        this.submitOrderDialogVisible = false
      } else {
        return this.$message.error('请完善内容')
      }
    },
    // man===========================================================
    // 网页全屏
    webFS() {
      document.body.classList.add('web-fullscreen-fix')
      if (this.stream_type == 'xFLV' || this.stream_type == 'xHLS' || this.stream_type == 'HLS') return
      this.$nextTick(() => {
        this.getHW()
      })
    },
    // 左侧播放树 搜索框:确认搜索
    searchTree() {
      this.$refs.qnDeviceTree.searchTree(this.filterText)
    },
    // 视频缩放调整
    getHW() {
      if (this.tabActive12_2 === true || this.tabActive12_2_old === true) {
        this.playerWidth = $('.video-item12_2').width()
        this.playerHeight = $('.video-item12_2').height()
      } else {
        this.playerWidth = $('.video-item').width()
        this.playerHeight = $('.video-item').height()
      }

      // this.rotate()
    },
    rotate() {
      const h = $('.video-scale .video-js').innerHeight()
      const seita = this.playerHeight / h
      const deg = parseFloat(((Math.acos(seita) * 180) / Math.PI).toFixed(2))
      const top = (this.playerHeight - h) / 2
      $('.video-js').css('transform', `rotateX(${deg}deg)`)
      $('.video-js').css('top', `${top}px`)
    },
    rotate2() {
      const h = $('.video-scale .video-js').innerHeight()
      const seita = this.playerHeight / h
      const deg = parseFloat(((Math.acos(seita) * 180) / Math.PI).toFixed(2))
      const top = (this.playerHeight - h) / 2
      if (window.innerHeight > 1200) {
        $('.video-js').css('transform', `scaleY(2.4)`)
      } else if (window.innerHeight >= 1100 && window.innerHeight <= 1200) {
        $('.video-js').css('transform', `scaleY(2.25)`)
      } else if (window.innerHeight > 1080 && window.innerHeight < 1100) {
        $('.video-js').css('transform', `scaleY(2.15)`)
      } else if (window.innerHeight >= 1050 && window.innerHeight <= 1080) {
        $('.video-js').css('transform', `scaleY(2.1)`)
      } else if (window.innerHeight >= 1000 && window.innerHeight < 1050) {
        $('.video-js').css('transform', `scaleY(2.05)`)
      } else if (window.innerHeight >= 950 && window.innerHeight < 1000) {
        $('.video-js').css('transform', `scaleY(1.9)`)
      } else if (window.innerHeight >= 850 && window.innerHeight < 900) {
        $('.video-js').css('transform', `scaleY(1.8)`)
      } else if (window.innerHeight >= 750 && window.innerHeight < 800) {
        $('.video-js').css('transform', `scaleY(1.7)`)
      } else if (window.innerHeight >= 725 && window.innerHeight < 750) {
        $('.video-js').css('transform', `scaleY(1.6)`)
      } else if (window.innerHeight >= 700 && window.innerHeight < 725) {
        $('.video-js').css('transform', `scaleY(1.5)`)
      } else if (window.innerHeight >= 650 && window.innerHeight < 700) {
        $('.video-js').css('transform', `scaleY(1.4)`)
      } else if (window.innerHeight > 625 && window.innerHeight < 650) {
        $('.video-js').css('transform', `scaleY(1.3)`)
      } else if (window.innerHeight > 600 && window.innerHeight < 625) {
        $('.video-js').css('transform', `scaleY(1.2)`)
      } else if (window.innerHeight <= 600) {
        $('.video-js').css('transform', `rotateX(${deg}deg)`)
        $('.video-js').css('top', `${top}px`)
      }
    },

    // 切换全屏
    changeFullScreen() {
      const el = this.$refs.videoArea
      const rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
        return
      }
      if (typeof window.ActiveXObject !== 'undefined') {
        const wscript = new ActiveXObject('WScript.Shell')
        if (wscript) {
          wscript.SendKeys('{F11}')
        }
      }
    },

    // 宫格数量: 被切换
    changeTab(tab, value, way) {

      this.rtmpSrc = ''
      this.deviceId = ''
      this.rtmpType = ''
      this.gatewayId = ''
      this.channelNum = ''

      this.has_active = false
      // this.grid_select = -1

      this.$nextTick(() => {
        this.grid_select = -1
        if (tab === 1) {
          this.grid_select = 0
        } else if (tab === 12 && way === 3) {
          this.tabActive12_2 = false
          this.tabActive12_3 = false
          this.tabActive12_2_old = true
        } else if (tab === 12 && way === 2) {
          this.tabActive12_2 = true
          this.tabActive12_3 = false
          this.tabActive12_2_old = false
        } else {
          this.tabActive12_2 = false
          this.tabActive12_3 = true
          this.tabActive12_2_old = false
        }
        this.grid_len = tab

        // 插入选框数组
        this.checkBoxArr = []
        for (let i = 0; i < this.grid_len; i++) {
          this.checkBoxArr.push({ checked: false })
        }
      })
    },
    // heartBeat() {
    //   // 每个一段时间执行一次 心跳接口
    //   window.clearInterval(this.videoPlayTimer)
    //   this.videoPlayTimer = window.setInterval(() => {
    //     getHeartBeat()
    //   }, 180000)
    // },

    // 播放树: 某一项被点击, 开始播放视频
    clickTree(data, checked, position, node) {
      // 添加到选择框数组
      this.getChecked(position, data.deviceId, data.id, data.siteId, checked = true)
      // console.log(data)
      // console.log('通道ID', data.id)
      // console.log('位置', position)
      // console.log('设备ID', data.deviceId)
      if (checked) {
        // 将点击的视频设备信息放本地存储 (日后优化: 可以使用父子组件传值的方式解决来解决此问题-----子组件PlayerBox)
        var ipcArrs = this.ipcArrs
        ipcArrs['pos_' + position] = { data, checked, position }
        this.ipcArrs = ipcArrs
        sessionStorage.setItem('ipcArrs', JSON.stringify(ipcArrs))

        // end将点击的视频设备信息放本地存储
        getVideourl({ deviceId: node.parent.data.id, channelId: data.id })
          .then((res) => {
            // console.log(res)
            if (res.code === 0) {
              // code=0 打开视频成功
              if (res.status === -4) {
                this.$message({
                  message: '当前设备不支持WEBRTC格式, 去【系统设置】进行更改!',
                  type: 'warning',
                  duration: 5000
                })
                return
              }
              let tmpurl = res.data.payloads[1].url || ''
              const start = tmpurl.indexOf('#')
              if (start !== -1) tmpurl = tmpurl.substring(0, start)
              this.getChildVal(position, checked, this, 0, tmpurl, data, node)
              // this.heartBeat();   // 心跳
            } else {
              // code!=0 打开失败
              this.$message.error('请求失败')
              // this.getChildVal(position, !checked, this, -1)
            }
          })
          .catch(() => {
            // this.$message.error(err.message)
            this.$message.error('视频打开失败')
          })
      } else {
        // 关闭视频
        const ipcArrs = JSON.parse(sessionStorage.getItem('ipcArrs'))
        ipcArrs['pos_' + position].checked = false
        sessionStorage.setItem('ipcArrs', JSON.stringify(ipcArrs))
        this.getChildVal(position, checked, this, 1)
      }

      const resArr = []
      const checkArr = this.$refs.qnDeviceTree.checkedNodes
      for (let i = 0; i < checkArr.length; i++) {
        if (checkArr[i]) {
          resArr.push(checkArr[i].id)
        }
      }
      this.cameraIds = [...resArr]
      // 存储正在播放视频的id
    },
    // 通过ref,拿到子组件. 操作子组件
    getChildVal(
      position,
      checked,
      that,
      empty,
      tmpurl = '',
      data = {},
      node = {}
    ) {
      // 各参数: (位置, 打开视频?,this, 清空, url, data)
      if (empty === 1) {
        // 清空子组件 如下属性值
        that.$refs['videoPlayer' + position][0].videoSrc = ''
        that.$refs['videoPlayer' + position][0].device_id = ''
        that.$refs['videoPlayer' + position][0].channel_id = ''
        that.$refs['videoPlayer' + position][0].branchinfo = {}
        that.$refs['videoPlayer' + position][0].siteId = ''
        // that.$refs['videoPlayer' + position][0].videoId = ''
        // that.$refs['videoPlayer' + position][0].videoTitle = ''
        // that.$refs['videoPlayer' + position][0].videoType = ''
        // that.$refs['videoPlayer' + position][0].gatewayId = ''
        // that.$refs['videoPlayer' + position][0].channelNum = ''
      } else if (empty === 0) {
        that.$refs['videoPlayer' + position][0].videoSrc = tmpurl
        that.$refs['videoPlayer' + position][0].device_id = node.parent.data.id
        that.$refs['videoPlayer' + position][0].channel_id = data.id
        that.$refs['videoPlayer' + position][0].branchinfo = data.branchinfo
        that.$refs['videoPlayer' + position][0].siteId = data.siteId
        // that.$refs['videoPlayer' + position][0].videoId = data.deviceIndex
        // that.$refs['videoPlayer' + position][0].videoTitle = data.name
        // that.$refs['videoPlayer' + position][0].videoType = data.type
        // that.$refs['videoPlayer' + position][0].gatewayId = data.deviceID
        // that.$refs['videoPlayer' + position][0].channelNum = data.number
      }
      that.$nextTick(() => {
        if (that.has_active && that.grid_select === position) {
          // (1)有处于活跃的宫格
          if (checked) {
            // 打开活跃宫格的视频,或者切换活跃宫格:  保存处于活跃的视频播放参数
            const child_ele = that.$refs['videoPlayer' + position][0]
            that.rtmpSrc = child_ele.videoSrc
            that.device_id = child_ele.device_id
            that.channel_id = child_ele.channel_id
            that.branchinfo = child_ele.branchinfo
            // that.deviceId = child_ele.videoId
            // that.rtmpType = child_ele.videoType
            // that.gatewayId = child_ele.gatewayId
            // that.channelNum = child_ele.channelNum
          } else {
            // 关闭活跃宫格的视频
            that.rtmpSrc = ''
            that.device_id = ''
            that.channel_id = ''
            that.branchinfo = {}
            // that.deviceId = ''
            // that.rtmpType = ''
            // that.gatewayId = ''
            // that.channelNum = ''
          }
        } else {
          // (2)无活跃的宫格
          that.rtmpSrc = ''
          that.device_id = ''
          that.channel_id = ''
          that.branchinfo = {}
          // this.deviceId = ''
          // this.rtmpType = ''
          // this.gatewayId = ''
          // this.channelNum = ''
        }

        // if(checked) getHeartBeat()   // 无论是否有活跃的宫格, 打开视频都要 调用此函数
      })
    },
    // 宫格: 某一项被点击
    handleGrid(argu) {
      const position = argu[0]
      const is_active = argu[1]

      if (!this.has_active && !is_active) {
        // 没有被选中的宫格, 则让当前被点击的宫格处于活跃
        this.has_active = true
        this.grid_select = position
      } else if (this.has_active && is_active) {
        // 有被选中的宫格, 活跃的再次接受点击,则取消活跃
        this.has_active = false
        this.grid_select = -1
      } else if (this.has_active && !is_active) {
        // 有被选中的宫格, 非活跃的被点击,则切换活跃宫格
        this.has_active = true
        this.grid_select = position
      }
      this.getChildVal(position, !is_active, this, -1)
      // this.$refs.qnDeviceTree.changePosition(this.grid_select)
    },
    //  提交所选设备下一步
    getDeviceList(e) {
      console.log(e)
      // this.tabs_name = 'second'
    },
    showTemplateList() {

    },
    getTemplateDetail() {

    },
    // 编辑图片
    editMultiGraph(i) {
      this.innerVisible = true
      this.cache = i
      // console.log('编辑图片', i)
    },
    // 内层的打开回调
    innerVisibleshow() {
      this.$nextTick(() => {
        var myCanvas = document.getElementById('myCanvas')
        var Canvas2D = myCanvas.getContext('2d')
        //
        // var setw = document.getElementById('getw')
        // var seth = document.getElementById('geth')
        var imgById = document.getElementById('img' + this.cache)
        //
        // console.log('宽高 :>> ', setw.offsetWidth, seth.offsetHeight)
        //
        myCanvas.width = imgById.offsetWidth
        myCanvas.height = imgById.offsetHeight
        //
        let img = new Image()
        img.src = this.orderForm[this.cache].pictureUrl
        img.crossOrigin = 'anonymous'
        // console.log('data:image/png;base64,'+ this.orderForm[this.cache].base64Picture)
        const that = this
        img.onload = function() {
          // const Atrament = require('atrament')
          const huabi = new Atrament(myCanvas, {
            width: imgById.offsetWidth,
            height: imgById.offsetHeight,
            color: 'red'
          })
          that.afterEditing = huabi

          Canvas2D.drawImage(img, 0, 0, myCanvas.width, myCanvas.height)
        }
      })
    },
    // 确认编辑
    confirmEdit() {
      console.log('确认编辑', this.orderForm)
      this.orderForm[this.cache].base64Img = this.afterEditing.toImage()
      this.innerVisible = !this.innerVisible
    }

  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

::v-deep .el-tabs__item {
  padding-left: 25px !important;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

::v-deep .el-upload--picture-card {
  width: 0;
  height: 0;
}

::v-deep .el-upload-list {
  line-height: 0px;
}

::v-deep .el-upload-list__item {
  width: 90px !important;
  height: 70px !important;
  margin: 5px 5px 0 0 !important;
}

::v-deep .el-input__inner {
  width: 200px;
}

.check-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 215px;

  .sub-score {
    height: 20px;
    padding: 0 5px;
    background-color: #FFEBEC;
    color: #EB7191;
    line-height: 20px;
  }
}

.fail-cotent {
  color: #BCBABA;
  margin-bottom: 20px;

  .fail-tip {
    line-height: 18px;
  }

  .camera-isall {
    display: flex;
    justify-content: flex-end;

    .item-btn {
      margin-right: 10px;
    }
  }

  .camera-button {
    height: 70px;
    width: 90px;
    padding: 10px;
    background-color: #F5F5F8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #adadad;
    border-radius: 8px;
    cursor: pointer;

    .el-icon-camera-solid {
      font-size: 30px;
    }

    .pzqz {
      height: 20px;
      line-height: 20px;
    }
  }
}

.inspection-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  margin: 10px 0;
}

.cube {
  display: inline-block;
  margin-right: 5px;
  width: 3px;
  height: 14px;
  transform: translateY(1px);
  background: rgb(96, 205, 255);
}

.w100 {
  width: 100%;
}

//巡查详情
.crurecordBox {
  display: flex;
  justify-content: space-between;

  & > div {
    border-radius: 10px;
  }

  .contentBox {
    display: flex;
    align-items: center;

    & > div {
      flex: 1;
    }
  }

  .box-card1 {
    width: 50%;
  }

  .box-card2 {
    width: 25%;
    margin: 0 15px;
  }

  .box-card3 {
    width: 25%;
  }

  .box-content {
    margin-top: 10px;
  }

  /* 四个圆点 */
  .point {
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-2px);
  }

  .count2 {
    background-color: rgb(191, 255, 148);
  }

  .count3 {
    background-color: rgb(44, 58, 255);
  }

  .count4 {
    background-color: rgb(170, 192, 255);
  }

  .count5 {
    background-color: #ff8b8b;
  }
}

.centerBox {
  background: white;
  padding: 20px;
  margin-top: 10px;

  .threebtn {
    margin-bottom: 10px;
  }
}

.statistics {
  display: flex;
}

.result {
  flex: 4;
}

.passpie2 {
  font-size: 13px;
  line-height: 18px;
  color: rgb(58, 184, 0);
  background: rgb(206, 255, 232);
  padding: 0 5px;
  text-align: center;
  border-radius: 10%;
}

.passpie3 {
  font-size: 13px;
  line-height: 18px;
  color: red;
  background: rgb(255, 251, 194);
  padding: 0 5px;
  text-align: center;
  border-radius: 10%;
}

//巡查详情
.el-tree-node__content > span {
  // 点击查看模板树内容展开缩放的旋转动画
  transform: rotate(0deg) !important;
}

.el-form-item__label {
  // 两端对齐
  display: flex;
  justify-content: space-between;
  align-items: center !important;

  &::before {
    // line-height: 30px;
    transform: translateY(3px);
  }

  .form-item-label {
    flex: 1;
    text-align-last: justify !important;
    text-align: justify !important;
  }
}

.el-dialog {
  .el-dialog__header {
    background-color: #f5f7f5 !important;
  }
}

/* 查看按钮 */
.action {
  font-size: 13px;
  color: var(--app_primary);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.templateName {
  text-align: center;
  font-size: 15px;
  font-weight: bold
}

.template-detail-tree {
  padding: 0 50px;
}

// 考评模板
// 考评模板
.update-template {
  .template-item {
    // background-color: #fcd;
    margin-bottom: 20px;
  }

  .qn-line {
    height: 1px;
    background-color: $border_light;
    margin-bottom: 20px;
  }

  .the-score {
    margin-top: 10px;
    color: $text_middle;
    font-size: 12px;
  }
}

.app-container {
  height: 100%;

  .app-container-tree {
    height: 100%;
    padding: 0 10px 10px 20px !important;
    background-color: #fff;

    .check-template {
      .check-template-item {
        display: flex;
        margin-bottom: 15px;
        justify-content: space-between;
        align-items: center;
        padding-right: 5px;

        .item-radio {
          width: 60%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .item-btn {
          cursor: pointer;
          color: $my-primary;
          font-size: 12px;
        }
      }


      // background-color: #ddf;
    }
  }
}

.check-template-footer {
  // background-color: aqua;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.device-tree-title {
  font-family: Microsoft YaHei;
  font-weight: 400;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f8f8;
  padding: 0 10px;

  .title {
    font-size: 18px;
    color: #333;
  }

  .tree-search {
    /*margin-bottom: 10px;*/
    // flex: 0 0 40px;
    // margin-left: 15px;
    // width: calc(100% - 30px);
    width: 60%;

    .el-input__suffix {
      width: 32px;
      height: 32px;
      background: #fff;
      border-radius: 0px 4px 4px 0px;
      border: 1px solid #dcdfe6;
      top: 0px;
      right: 0px;
      box-sizing: border-box;
    }

    .search-icon {
      color: #aaa;
      cursor: pointer;
      font-size: 16px;
      // font-weight: bold;
      height: 32px;
    }
  }
}

.gw-home {
  // background-color: aqua;
  height: 100%;
  display: flex;

  .home-part {
    height: 855px;

    .panel-container {
      background: #fff;
      overflow: hidden;

      .panel-title {
        position: relative;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 60px;
        color: #333;
        padding-left: 30px;
      }

      .panel-title2 {
        // background-color: #cfd;
        background-color: #f9f9f9;
        position: relative;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 60px;
        color: #333;
        padding-left: 30px;
        display: flex;
        justify-content: space-between;
      }

      .panel-title-grey {
        background: #f8f8f8;
      }
    }

    .home-left {
      display: flex;
      flex-direction: column;
      height: 100%;

      .source-list {
        height: 100%;
        // min-height: 520px;
        display: flex;
        flex-direction: column;
        position: relative;

        .tree-container {
          flex: 1;
          padding-top: 20px;
          overflow: hidden;
        }

        .coverPlatform {
          cursor: pointer;
          // position: absolute;
          // bottom: 20px;
          line-height: 30px;
          width: 100%;
          text-align: center;

          i {
            color: #b1beff;
          }
        }
      }

      .camera-platform {
        flex: 0 0 310px;
        display: flex;
        flex-direction: column;

        .camera-directive {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .not-allowed {
            pointer-events: none;
          }

          .directive-container {
            // width: 208px;
            width: 164px;
            // height: 180px;
            height: 160px;
            background: #fff;
            border: 1px solid rgba(200, 200, 200, 1);
            border-radius: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            // padding: 26px 40px;
            padding: 20px 16px 16px;

            p {
              width: 100%;
              display: flex;
              justify-content: space-between;
            }

            i {
              // display: inline-block;
              box-sizing: border-box;
              width: 34px;
              height: 34px;
              font-size: 14px;
              color: $text_light;
              cursor: pointer;
              position: relative;
              border: 2px solid #a0a4ba;
              border-radius: 6px;
              display: flex;
              justify-content: center;
              align-items: center;

              &:before {
                // display: inline-block;
                // position: absolute;
              }

              &:hover {
                color: $my-primary;
                border-color: $my-primary;
              }

              &.is-disabled {
                pointer-events: none;
                opacity: 0.5;
                cursor: not-allowed !important;
              }
            }

            .icon1:before {
              // left: 5px;
              // top: 8px;
              transform: rotateZ(-45deg);
            }

            // .icon2:before {
            //   // top: 8px;
            //   // left: 6px;
            // }
            .icon3:before {
              // top: 8px;
              // left: 10px;
              transform: rotateZ(45deg);
            }

            .icon4:before {
              // top: 8px;
              // left: 5px;
              transform: rotateZ(-90deg);
            }

            .icon5 {
              font-size: 20px;
              // &:before {
              //   // top: 3px;
              //   // left: 5px;
              // }
            }

            .icon6:before {
              // top: 8px;
              // left: 7px;
              transform: rotateZ(90deg);
            }

            .icon7:before {
              // top: 10px;
              // left: 5px;
              transform: rotateZ(-135deg);
            }

            .icon8:before {
              // top: 8px;
              // left: 6px;
              transform: rotateZ(180deg);
            }

            .icon9:before {
              // top: 10px;
              // left: 8px;
              transform: rotateZ(135deg);
            }
          }

          .float-layer {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: not-allowed !important;
          }
        }
      }
    }

    .home-right {
      height: 100%;
      display: flex;
      flex-direction: column;

      .operator {
        .workorder-btn {
          color: var(--app_primary);
          font-size: 12px;
          display: inline-flex;
          margin-right: 40px;
          justify-content: space-between;

          .btn-item {
            width: 80px;
            line-height: 30px;
            border: 1px solid var(--app_primary);
            border-radius: 3px;
            text-align: center;
            margin-right: 12px;
            cursor: pointer;
          }
        }

        // background-color: #f99;
        // position: absolute;
        // top: 0;
        // right: 30px;
        i {
          font-style: normal;
          font-size: 20px;
          cursor: pointer;
          color: #bbb;

          &:not(:last-child) {
            margin-right: 20px;
          }

          &.active {
            color: $my-primary;
          }

          &:hover {
            color: $my-primary;
          }

          &.disabled {
            cursor: not-allowed;
          }

          &.disabled:hover {
            color: #dddddd;
          }
        }

        .iconfont12 {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
        }
      }

      .panel-content {
        flex: 1;
        padding: 10px 30px;
        // position: relative;
        overflow: hidden;

        .video-content {
          width: 100%;
          height: 100%;
          overflow: auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          background-color: #fff;

          .video-item {
            margin-bottom: 1px;
            display: inline-block;
            overflow: hidden;
          }

          &.video-item-25 .video-item {
            width: 19.9%;
            height: 19.8%;
          }

          &.video-item-24 .video-item {
            width: 16.62%;
            height: 24.867%;

            &:nth-child(1) {
              order: 1;
            }

            &:nth-child(2) {
              order: 2;
            }

            &:nth-child(3) {
              order: 7;
            }

            &:nth-child(4) {
              order: 8;
            }

            &:nth-child(5) {
              order: 3;
            }

            &:nth-child(6) {
              order: 4;
            }

            &:nth-child(7) {
              order: 9;
            }

            &:nth-child(8) {
              order: 10;
            }

            &:nth-child(9) {
              order: 5;
            }

            &:nth-child(10) {
              order: 6;
            }

            &:nth-child(11) {
              order: 11;
            }

            &:nth-child(12) {
              order: 12;
            }

            &:nth-child(13) {
              order: 13;
            }

            &:nth-child(14) {
              order: 14;
            }

            &:nth-child(15) {
              order: 19;
            }

            &:nth-child(16) {
              order: 20;
            }

            &:nth-child(17) {
              order: 15;
            }

            &:nth-child(18) {
              order: 16;
            }

            &:nth-child(19) {
              order: 21;
            }

            &:nth-child(20) {
              order: 22;
            }

            &:nth-child(21) {
              order: 17;
            }

            &:nth-child(22) {
              order: 18;
            }

            &:nth-child(23) {
              order: 23;
            }

            &:nth-child(24) {
              order: 24;
            }
          }

          &.video-item-16 .video-item {
            width: 24.9%;
            height: 24.8%;
          }

          &.video-item-12 .video-item {
            width: 24.9%;
            height: 33.1%;
          }

          &.video-item-12 .video-item12_2 {
            width: 16.55%;
            height: 49.8%;
          }

          &.video-item-9 .video-item {
            width: 33.25%;
            height: 33.1%;
          }

          &.video-item-4 .video-item {
            width: 49.97%;
            height: 49.85%;
          }

          &.video-item-1 .video-item {
            width: 100%;
            height: 100%;
          }
        }

        .device-list {
          position: absolute;
          top: 10px;
          right: 0;
          width: 345px;
          height: calc(100% - 20px);
          padding-right: 14px;

          .device-item {
            width: 100%;
            padding: 10px;
            border: 1px solid $border-light;
            margin-top: 20px;
            cursor: pointer;

            &:first-child {
              margin-top: 0;
            }

            &.active {
              border: 2px solid #ff941d;
            }

            .device-title {
              position: relative;
              margin-bottom: 6px;

              i {
                position: absolute;
                display: inline-block;
                top: 6px;
                left: 0;
                width: 8px;
                height: 8px;
                border-radius: 50%;

                &.device-offline {
                  background: $my-danger;
                }

                &.device-online {
                  background: $my-success;
                }
              }

              span {
                display: block;
                font-size: 14px;
                color: $text_dark;
                padding-left: 15px;
              }
            }

            .device-img {
              display: inline-block;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .left-home-part {
    width: 255px;
    overflow: hidden;
    margin-right: 12px;
  }

  .right-home-part {
    flex: 1;
    border-left: 1px solid #e8e8e8;
  }

  .el-dialog {
    .img-container {
      height: 60vh;
      min-height: 380px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      background-color: #f99;

      .img-item {
        background-color: aqua;

        &.w99 {
          width: 99%;
          height: 99%;
        }

        &.w49 {
          width: 49%;
          height: 49%;
        }

        &.w32 {
          width: 32%;
          height: 32%;
        }

        &.w24 {
          width: 24%;
          height: 24%;
        }

        &.w16 {
          width: 16%;
          height: 16%;
        }

        &.w19 {
          width: 19%;
          height: 19%;
        }
      }
    }

    .wk-container {
      height: 60vh;
      min-height: 400px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .wk-container-item {
        flex: 1;
        height: 100%;
      }

      .wk-img {
        flex: 1;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .edit-img {
          cursor: pointer;
          color: var(--app_primary);
          text-align: right;
          font-size: 12px;
          padding-right: 5px;
        }
      }

      .wk-info {
        flex: 1;
      }
    }
  }
}

// 提交工单
.batch {
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .el-input__inner {
    width: 100%;
  }
}

.separationLine {
  width: 100%;
  height: 1px;
  border-top: 1px solid #535252;
  margin-bottom: 30px;
}

.buttom {
  display: flex;
  justify-content: center;
}

.submitForm {
  height: 80vh;
}

.draw-page {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
